<template>
	<div>
		<HeaderComponent />
		<div class="content-box">
			<div class="content-sub-box">
				<LeftMenuComponent activeIndex="5" />
				<div class="content-right-box">
					<div class="right-top-box">
						<div class="right-vertical-box"></div>
						<div class="right-vertical-title-box">
							展商下载专区
						</div>
					</div>
					<div class="login-box">
						<div class="download-box" v-for="(item, index) in dataList" :key="index">
							<div class="download-file-icon-box">
								<img src="../assets/file-icon.png" alt="">
							</div>
							<div class="download-title-box">
								<span>{{item.title}}</span>
							</div>
							<div class="download-icon-box">
								<a :href="item.files" target="_blank">
									<img src="../assets/download-icon.png" alt="">
									<p>下载</p>
								</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<FooterComponent />
	</div>
</template>

<script>
	import {
		download
	} from "/src/api/download.js";
	import HeaderComponent from './Header.vue';
	import FooterComponent from './Footer.vue';
	import LeftMenuComponent from './LeftMenu.vue';
	export default {
		name: 'ExhibitorsDownloadComponent',
		components: {
			HeaderComponent,
			FooterComponent,
			LeftMenuComponent
		},
		props: {
			msg: String
		},
		data() {
			return {
				dataList: [],
			};
		},
		mounted() {
			this.getList();
		},
		methods: {
			getList() {
				download().then((data) => {
					this.dataList = data.data.data;
				}).catch((error) => {
					if (error.response) {
						// 请求已发出，服务器用状态码响应
						console.error(error.response.data);
						console.error(error.response.status);
						console.error(error.response.headers);
					} else if (error.request) {
						console.log(error)
					} else {
						// 在设置请求时出现错误
						console.error('Error', error.message);
					}
					// 处理错误
				});
			}
		},

	}
</script>

<style scoped>
	.download-icon-box p {
		color: #fff;
		font-size: 15px;
		float: left;
		margin-left: 7px;
		line-height: .5;
	}

	.download-icon-box img {
		width: 15px;
		height: 15px;
		float: left;
		margin-top: 10px;
		margin-left: 20px;
	}

	.download-icon-box a {
		text-decoration: none;
		display: block;
		width: 100%;
		height: 100%;
		box-sizing: border-box
	}

	.download-icon-box {
		width: 100px;
		height: 35px;
		background: #2B64A8;
		float: right;
		border-radius: 4px;
		margin-top: -5px;
	}

	.download-title-box span {
		line-height: 1.4;
	}

	.download-title-box {
		float: left;
		font-weight: 600;
		font-size: 18px;
		color: #333333;
		line-height: 24px;
		letter-spacing: 2px;
		margin-left: 15px;
	}

	.download-file-icon-box img {
		width: 26px;
		height: 24px
	}

	.download-file-icon-box {
		float: left
	}

	.download-box {
		width: 820px;
		margin: auto;
		height: 40px;
		border-bottom: 1px solid #DDDFE4;
		border-bottom-style: dashed;
		margin-top: 15px;
	}

	.login-box {
		width: 870px;
		height: 300px;
		border: 1px #eeeeee solid;
		margin: 20px auto;
		border-radius: 3px;
	}

	.right-vertical-title-box {
		width: 200px;
		height: 40px;
		font-size: 22px;
		color: #333333;
		line-height: 2.3;
		text-align: left;
		font-style: normal;
		overflow: hidden;
	}

	.right-vertical-box {
		width: 4px;
		height: 23px;
		background: #0066ad;
		float: left;
		margin-top: 15px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.right-top-box {
		height: 52px;
		width: 910px;
		border-bottom: 1px #DADADA solid;
	}

	.content-right-box {
		width: 910px;
		float: left;
		margin-left: 25px;
		height: 400px;
		overflow: hidden;
		margin-bottom: 30px;
		box-shadow: 0px 10px 20px 0px rgba(43, 100, 168, 0.1);
	}

	.content-box {
		overflow: hidden;
	}

	.el-menu .el-menu-item.is-active {
		background: rgb(0, 102, 173) !important;
		color: #fff;
	}

	.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
		border-bottom: 0;
	}

	.el-menu-vertical li {
		width: 220px !important;
		text-align: left;
		display: inherit;
		height: 45px;
		line-height: 2.5;
		color: rgb(0, 102, 173);
		background: #fff;
	}

	.el-menu-vertical {
		width: 220px;
		margin: auto;
		margin-top: 10px;
	}

	.content-left-box {
		width: 260px;
		overflow: hidden;
		height: 385px;
		border: 1px solid #eeeeee;
		float: left;
	}

	.content-left-font {
		font-size: 18px;
	}

	.contnet-menu-title-box {
		color: #fff;
		font-size: 22px;
		float: left;
		margin-top: 13px;
		margin-left: 15px;
	}

	.content-menu-icon-box img {
		width: 100%;
		height: 100%;
	}

	.content-menu-icon-box {
		width: 36px;
		height: 36px;
		float: left;
		margin-left: 45px;
		margin-top: 10px
	}

	.contnet-left-top-box {
		background-color: rgb(0, 102, 173);
		width: 260px;
		height: 60px;
	}

	.content-sub-box {
		width: 1220px;
		margin: auto;
		margin-top: 20px;
	}
</style>